<template>
    <div class="common-container">
        <div class="header">
                <div class="header_left">
                    <el-input v-model="tenantName" clearable @clear="nameClear" placeholder="请输入维保组名称" size="small"
                        style="width: 220px" maxlength="20">
                        <el-button slot="append" :icon="loadingSearch ? 'el-icon-loading' : 'el-icon-search'"
                            @click="searchClick"></el-button></el-input>

                            <TreeSearch style="width: 220px;margin-left: 15px;" @changeOrgId="changeOrgId" @onClear="onClear" :clearable="false">
                            </TreeSearch>

                    <!-- <el-select size="small" style="width: 190px;margin-left: 15px;" @change="changeOrgId"
                    @keyup.enter.native='searchList' v-loadMore="loadMore" v-model='orgId' placeholder='请选择组织机构'>
                    <el-option v-for='item in projectList' :label='item.orgName' :value='item.id' :key='item.id'>
                    </el-option>
                    <div class="div_box" v-loading="loading" :style="loading ? '' : 'display: none;'"> </div>
                </el-select> -->

                </div>
                <div class="header_right">
                    <el-button class="el_button" size="small" icon="el-icon-plus" style="margin-left: 15px"
                        @click="addClick" v-permission="{ action: 'maintenance:add' }">
                        新增
                    </el-button>
                </div>
            </div>
            <div class="content">
                <el-table :data="dataList" class="table" :header-cell-style="headerStyle">
                    <el-table-column align="center" label="序号" type="index" width="80" height="30"></el-table-column>
                    <el-table-column align="center" prop="name" label="维保单位名称" min-width="100"
                        show-overflow-tooltip></el-table-column>

                    <el-table-column align="center" prop="username" label="维保联系人用户名" min-width="90"
                        show-overflow-tooltip></el-table-column>

                    <el-table-column align="center" prop="mobile" label="维保联系人手机号" min-width="90"
                        show-overflow-tooltip></el-table-column>
                    <el-table-column align="center" prop="orgName" label="组织机构" min-width="90"
                        show-overflow-tooltip></el-table-column>
                    <el-table-column align="center" prop="createTime" label="创建时间" min-width="150"
                        show-overflow-tooltip></el-table-column>
                    <el-table-column align="center" label="操作" min-width="140">
                        <template slot-scope="scope">
                            <el-tooltip class="item" effect="dark" content="编辑" placement="bottom"
                                v-permission="{ action: 'maintenance:edit' }">
                                <i @click="editClick(scope.row)" class="iconfont tianxie tableBtnIcon"></i>
                            </el-tooltip>
                            <el-tooltip class="item" effect="dark" content="删除" placement="bottom"
                                v-permission="{ action: 'maintenance:delete' }">
                                <i @click="delClick(scope.row.id)" class="iconfont shanchu tableBtnIcon"></i>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                </el-table>
                <pagination v-show="total > 0" :total="total" :page.sync="page" :limit.sync="limit"
                    :pageSizes="[10, 20, 30, 50]" @pagination="getDataList" class="pagination" />
            </div>

            <addProtectConfig ref="refaddProtectConfig" :targetId="targetId"></addProtectConfig>
            <editProtectConfig ref="refeditProtectConfig" :editData="editData"></editProtectConfig>
    </div>
</template>

<script>
import { reqMaintenancePage, reqMaintenanceRemove, reqOrgList } from "@api/api.js";
import Pagination from "@components/Pagination.vue";
import tableStyleMixin from "@mixin/table-style";
import addProtectConfig from "./components/addProtectConfig.vue";
import editProtectConfig from "./components/editProtectConfig.vue";
import { mapState } from "vuex";
import loadMore from "@mixin/loadMore";
import TreeSearch from "@components/TreeSearch.vue";

export default {
    name: "maintenance",
    components: { Pagination, addProtectConfig, editProtectConfig ,TreeSearch},
    mixins: [tableStyleMixin, loadMore],
    data() {
        return {
            tenantName: "",
            loadingSearch: false, //查询按钮loading
            dataList: [],
            limit: 10,
            page: 1,
            total: 0,
            orgId: "",
            editData: {
                name: "",
                orgId: "",
                userId: "",
                userIdList: [],
            }, //修改数据

            projectList: [], //单位数据
            sysInstanceIndex: 1,
            sysInstanceTotalPages: 10,
            loading: false,
            targetId: ""
        };
    },
    computed: {
        ...mapState(["user","spacesManage"]),
    },
    async created() {
    },
    mounted() {
        if (this.user.roleName == 'ORG_ADMIN' || this.user.roleName == 'INSTERALL_USER') {
            // 组织||装维
            this.targetId = this.spacesManage.organizationInfo.orgId;
            this.getDataList();
        }else{
            this.getDataList();
        }
    },
    methods: {
        changeOrgId(instanceId) {
            this.page = 1;
            this.limit = 10;
            this.targetId = instanceId.id
            this.getDataList();
        },
        onClear() {
            this.targetId = this.spacesManage.organizationInfo.orgId;
            this.page = 1;
            this.limit = 10;
            this.getDataList();
        },

        async loadMore() {
            if (this.sysInstanceIndex >= Math.ceil(this.sysInstanceTotalPages / 10)) return
            this.sysInstanceIndex++
            this.loading = true;
            // 获取列表数据的方法
            await this.OrgList()
            this.loading = false;
        },
        // 获取单位列表
        async OrgList(flag) {
            var res = await reqOrgList({
                userId: this.user.userId,
                roleName: this.user.roleName,
                tenantId: this.user.tenantId,
            });
            if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
            if (flag) {
                this.orgId = res.data.rows[0].id;
            }
            this.projectList = res.data.rows
        },

        // 获取列表
        async getDataList() {
            const res = await reqMaintenancePage(this.page, this.limit, {
                name: this.tenantName,
                orgId: this.targetId,
                userId: this.user.userId,
                roleName: this.user.roleName,
            });
            if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
            this.dataList = res.data.rows;
            this.total = res.data.total;
        },
        // 搜索
        async searchClick() {
            this.page = 1;
            this.limit = 10;
            this.loadingSearch = true;
            await this.getDataList();
            this.loadingSearch = false;
        },
        getInitDataList() {
            this.page = 1;
            this.limit = 10;
            this.getDataList();
        },
        // 清除请求
        nameClear() {
            this.getInitDataList();
        },
        // 新增
        addClick() {
            this.$refs.refaddProtectConfig.dialogVisible = true;
            this.$refs.refaddProtectConfig.OrgList(true)
        },
        // 编辑
        editClick(row) {
            // console.log(row);
            row.userIdList = []
            this.editData = JSON.parse(JSON.stringify(row));
            // this.$refs.refeditProtectConfig.OrgList()
            this.$refs.refeditProtectConfig.dialogVisible = true;
            this.$refs.refeditProtectConfig.Maintenance(this.editData.id)
        },
        // 删除
        async delClick(id) {
            const result = await this.$confirm(
                "此操作将永久删除该维保配置, 是否继续?",
                "提示",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }
            ).catch(() => { });
            if (result !== "confirm") return;
            const res = await reqMaintenanceRemove(id);
            if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
            this.$modal.notifySuccess("删除成功");
            this.getInitDataList();
        },
    },
};
</script>

<style scoped lang="less">
@import url("~@views/style/tablePage.less");
@import url("~@views/style/tree.less"); //左侧组织机构样式

::v-deep .el_button.el-button--small {
    background: #7367f0;
    color: #fff;
    border: none;
}

// 下拉框加载开始
.div_box {
    height: 276px;
    position: absolute;
    top: -1px;
    left: -1px;
    width: 100%;
    z-index: 9999;
    // background: red;
    // opacity: 0.5;
}

::v-deep .el-loading-mask {
    border-radius: 4px;
}

// 下拉框加载结束</style>